<template>
  <div>
    <header>留言板 > 新增</header>
    <div class="main">
      <!--<form>-->
        <div class="form-group">
          <label for="">用户名：</label>
          <input type="text" name="username" v-model="username">
        </div>
        <div class="form-group">
          <label for="">输入留言：</label>
          <textarea name="message" class="message" cols="40" rows="4" v-model="content"></textarea>
        </div>
        <div class="form-group">
          <button v-on:click="submitMessage()"> {{buttonMessage}} </button>
        </div>
      <!--</form>-->
    </div>
  </div>
</template>

<script>
  export default {
    name: "message-add",
    data() {
      return {
        username: 'root',
        content: 'This is some message',
        buttonMessage:' 提交留言 '
      }
    },
    methods:{
      submitMessage(){
        this.buttonMessage = '提交中...';
        let data = {
          username:this.username,
          content:this.content
        };
        let message = localStorage.getItem('message');
        if(message){
          message = JSON.parse(message);
        }else{
          message = [];
        }
        message.push(data);
        localStorage.setItem('message',JSON.stringify(message));
        this.buttonMessage = '提交成功';
        alert('提交成功');
        this.$router.push({path:'/list'})
      }
    }

  }
</script>

<style scoped>
  header {
    height: 30px;
    line-height: 30px;
    padding-left: 20px;
  }
  .main{
    padding:10px 10px 10px 20px;
  }
  .main .form-group{
    margin: 10px;
  }
</style>
